<template>
  <view class="content">
    <view class="container">
      
      <text class="intro">欢迎使用我们的服务！在使用前请仔细阅读以下协议条款：</text>

      <view class="section">
        <text class="subtitle">一、服务内容</text>
        <text class="paragraph">我们为您提供基于互联网的相关服务，包括但不限于信息查询、内容浏览、数据存储等功能。具体服务内容以实际提供的功能为准。</text>
      </view>

      <view class="section">
        <text class="subtitle">二、用户责任</text>
        <text class="paragraph">1. 用户应确保提供的信息真实、准确、完整</text>
        <text class="paragraph">2. 不得利用本服务从事任何非法活动</text>
        <text class="paragraph">3. 妥善保管账户信息，对账户下所有操作承担责任</text>
      </view>

      <view class="section">
        <text class="subtitle">三、隐私条款</text>
        <text class="paragraph">我们将严格保护用户个人信息安全，收集的信息仅用于提供服务及改进产品体验，未经用户授权不会向第三方披露。</text>
      </view>

      <view class="section">
        <text class="subtitle">四、免责声明</text>
        <text class="paragraph">因不可抗力或非本公司过错导致的网络中断、数据丢失等情况，本公司不承担赔偿责任。用户应自行承担使用本服务可能存在的风险。</text>
      </view>

      <view class="section">
        <text class="subtitle">五、协议修改</text>
        <text class="paragraph">我们保留随时修改本协议条款的权利，修改后的协议将通过适当方式公示，继续使用服务视为接受修改后的协议。</text>
      </view>

      <view class="effective-date">
        <text class="date-text">生效日期：2023年10月1日</text>
        <text class="date-text">最后更新：2023年9月20日</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx 0;
}

.container {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 30rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
}

.title {
  font-size: 36rpx;
  color: #222;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
  font-weight: 500;
  display: block;
  margin: 30rpx 0 20rpx;
}

.paragraph {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  display: block;
  margin-bottom: 20rpx;
  text-align: justify;
}

.intro {
  @extend .paragraph;
  margin-bottom: 30rpx;
}

.effective-date {
  margin-top: 40rpx;
  .date-text {
    font-size: 24rpx;
    color: #999;
    display: block;
    text-align: right;
    line-height: 1.6;
  }
}
</style>